<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <button>中国</button>
    <button>日本</button>
    <button>韩国</button>
    <div>中国新闻</div>
    <div>日本新闻</div>
    <div>韩国新闻</div>
</div>
</body>
<script>
    // 未整理
    // const btns = document.querySelectorAll("#root button");
    // const divs = document.querySelectorAll("#root div");
    // let index = 0;
    // btns.forEach(function(btn,i){
    //     divs[i].style.display = "none";
    //     btns[i].style.background = null;
    //     btn.onclick = function(){
    //         if(index === i) return;
    //         btns[index].style.background = null;
    //         divs[index].style.display = "none";
    //         index = i;// 记录点击的按钮下标
    //         btns[index].style.background = "red";
    //         divs[index].style.display = "block";
    //     }
    // })
    // btns[index].style.background = "red";
    // divs[index].style.display = "block";


    // 整理
    // const btns = document.querySelectorAll("#root button");
    // const divs = document.querySelectorAll("#root div");
    // let index = 0;
    // init();
    // 初始化函数
    // function init(){
    //     btns.forEach(function (btn, i) {
    //         hide(i);
    //         btn.onclick = function () {
    //             if (index === i) return;
    //             hide();
    //             index = i;// 记录点击的按钮下标
    //             show();
    //         }
    //     })
    //     show();
    // }
    //
    //
    // function hide(i = index) {
    //     btns[i].style.background = null;
    //     divs[i].style.display = "none";
    // }
    //
    // function show() {
    //     btns[index].style.background = "red";
    //     divs[index].style.display = "block";
    // }


    // 面向对象
    function Tag() {
        this.btns = document.querySelectorAll("#root button");
        this.divs = document.querySelectorAll("#root div");
        this.index = 0;
        this.init();
    }

    Object.assign(Tag.prototype, {
        init() {
            this.btns.forEach(function (btn, i) {
                this.hide(i);
                btn.onclick = function () {
                    if (this.index === i) return;
                    this.hide();
                    this.index = i;// 记录点击的按钮下标
                    this.show();
                }.bind(this);
            }.bind(this))
            this.show();
        },


        hide(i = this.index) {
            this.btns[i].style.background = null;
            this.divs[i].style.display = "none";
        },

        show() {
            this.btns[this.index].style.background = "red";
            this.divs[this.index].style.display = "block";
        }
    })

    new Tag();


</script>
</html>